<template>
  <view>
    <view class="userInfo">
      <image class="headerImg" @click="changeImg" :src="hasLogin ? '/static/vip-card-bg.png': headimg" mode="scaleToFill" @error="imageError"></image>
      <text class="info"  @click="toLogin">{{hasLogin ? 'Hi, '+loginProvider.username : '您尚未登录，请登录。'}}</text>
    </view>
    <view class="center-list" v-if="hasLogin">
      <view class="center-list-item" @click="toHistory">
        <uni-icons type="list" size="24"></uni-icons>
        <text class="item-text">浏览历史</text>
        <uni-icons type="arrowright" size="24"></uni-icons>
      </view>
      <view class="center-list-item" @click="toCollect">
        <uni-icons type="heart" size="24"></uni-icons>
        <text class="item-text">我的收藏</text>
        <uni-icons type="arrowright" size="24"></uni-icons>
      </view>
      <view class="center-list-item" @click="toLogOut">
        <uni-icons type="undo" size="24"></uni-icons>
        <text class="item-text">退出登录</text>
        <uni-icons type="arrowright" size="24"></uni-icons>
      </view>
    </view>
    <!-- <uni-popup id="popupDialog" ref="popupDialog" type="dialog" @change="change">
			<uni-popup-dialog :type="msgType" title="通知" content="确定" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup> -->
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: "mine",
  data() {
    return {
      headimg: '../../../static/missing-face.png',
      // hasLogin: true
    }
  },
  mounted() {
    console.log(this.hasLogin, this.loginProvider)
  },
  computed: {
    ...mapState([ 'loginProvider', 'hasLogin'])
    // userInfo() {
    //   return this.$store.state.loginProvider
    // },
    // hasLogin() {
    //   return this.$store.hasLogin
    // }
  },
  methods: {
    ...mapActions(['userLogout']),
    imageError: (e)=>{
    },
    changeImg() {
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          var changeimg = tempFilePaths[0] 
          // uni.uploadFile({
          //   url: app.apiUrl+'small/index/indexdata', //仅为示例，非真实的接口地址
          //   filePath: tempFilePaths[0],
          //   name: 'headimgurl',
          //   formData: {
          //     openid: uni.getStorageSync('openid')
          //   },
          //   success: (res) => {
          //     console.log(JSON.parse(res.data))
          //     var res = JSON.parse(res.data)
          //     if (res.status) {
          //       app.getUserData() //这里调用用户信息接口更新数据存进vuex
          //       uni.showToast({
          //           title:res.msg,
          //           icon:'none',
          //           duration:2000
          //       })
          //     }else {
          //       uni.showToast({
          //           title:res.msg,
          //           icon:'none',
          //           duration:2000
          //       })
          //     }
          //   }
          // });
        }
      });
    },
    toLogin() {
      if(this.hasLogin) return
      uni.navigateTo({
        url: '/pages/tabBar/user/login'
      })
    },
    toLogOut() {
      this.userLogout().then(res=>{
        if(res.code == 200) {
          uni.showToast({title:"登出成功!"});
        }
      })
    },
    toHistory() {
      uni.navigateTo({
        url: '/pages/tabBar/user/readHistory'
      })
    },
    toCollect() {
      uni.navigateTo({
        url: '/pages/tabBar/user/myCollection'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.userInfo {
  width: 750rpx;
  height: 30vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ccc;
  border-radius: 10rpx;
  .headerImg {
    width: 200rpx;
    height: 200rpx;
    margin: 0 20rpx;
    border-radius: 50%;
    box-shadow: 0 0 8rpx #fff;
  }
  .info {
    width: 450rpx;
    font-size: 38rpx;
    font-weight: bolder;
  }
}
.center-list {
  width: 750rpx;
  .center-list-item {
    margin: 40rpx auto;
    width: 90%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-text {
      width: 80%;
      text-align: left;
      font-size: 30rpx;
    }
  }
}
</style>